<template>
  <div class="albumbox">
    <!-- 这是搜索框和删除相册的地方 -->
    <div class="operate">
      <!-- 搜索相册 -->
      <div class="search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="">
            <el-input
              v-model.trim="formInline.album_name"
              placeholder="相册名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <Albumview ref="child"></Albumview>
    <!-- <Picture></Picture> -->

    <!-- 这是弹出框 -->
    <div class="kuang">
      <el-dialog title="创建相册" :visible.sync="dialogVisible" width="40%">
        <!-- 内容主体区 -->
        <el-form
          ref="form"
          :model="from"
          :rules="addFromRules"
          label-width="80px"
        >
          <!-- 相册名字 -->
          <el-form-item label="相册名" prop="album_name">
            <el-input v-model.trim="from.album_name"></el-input>
          </el-form-item>
          <!-- 相册类型 -->
          <el-form-item label="相册类型" prop="albumtype">
            <!-- <el-input v-model="from.albumtype"></el-input> -->

            <!-- <el-dropdown split-button type="primary" @click="handleClick">
  点击选择
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>家庭</el-dropdown-item>
    <el-dropdown-item>旅游</el-dropdown-item>
    <el-dropdown-item>美食</el-dropdown-item>
    <el-dropdown-item>朋友</el-dropdown-item>
    <el-dropdown-item>生活</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown> -->
          </el-form-item>
          <!-- 相册权限 -->
          <el-form-item label="相册权限" prop="albumpower">
            <el-input v-model="from.albumpower"></el-input>
          </el-form-item>
        </el-form>
        <!-- 内容底部区 -->
        <span slot="footer" class="dialog-footer">
          <el-button class="quxiao" @click="dialogVisible = false"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click=";(dialogVisible = false), chuangzhi()"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 这是创建相册的按钮 -->
    <div class="createalbum">
      <i class="el-icon-circle-plus-outline" @mouseover="tips" @click="out"></i>
    </div>
  </div>
</template>

<script>
import Albumview from "@/components/albumview/Albunview"
import Picture from "@/views/Picture"

export default {
  // 组件
  components: {
    Albumview,
    Picture,
  },
  // 数据源
  data() {
    return {
      dialogVisible: false,
      // 添加要创建相册数据的表单
      from: {
        album_name: "",
      },

      formInline: {
        album_name: "",
        region: "",
      },

      list: [],

      // props
      props: {
        name: {
          type: String,
          required: true,
        },
      },

      // 规则
      addFromRules: {
        album_name: [
          { required: true, message: "请输入相册名", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    }
  },

  methods: {
    //点击这里提示用户创建一个相册
    tips() {
      //  return alert('点击创建相册');
    },
    // 这里点击显示创建相册的信息
    out() {
      this.dialogVisible = true
    },
    // 这里点击选择相册类型获取类型值
    handleClick() {
      console.log("hah")
    },
    // 这里将创建相册的数据对象传到list数组中
    async chuangzhi() {
      // 1 在创建相册的表单中输入信息后，要把数据存在album中
      const { data: res } = await this.$http.post("album/createalbum", {
        album_name: this.from.album_name,
      })
      console.log(res)
      // window.location.reload()
      // this.$forceUpdate();
      this.$refs.child.showalbum()
    },

    // 点击查询按钮查询相册
    async onSubmit() {
      const { data: res } = await this.$http.get("album/searchalbum", {
        params: { album_name: this.formInline.album_name },
      })
      console.log("拿到查询相册的数据")
      // console.log(res.data);
      this.list = res.data
      console.log(this.$refs.child.list) //6
      this.$refs.child.list = this.list
      console.log(this.$refs.child.list) //1
      //  this.$refs.child.selectalbum();
    },
  },
}
</script>

<style lang="less" scoped>
.operate {
  position: relative;
  position: fixed;
  margin-top: 30px;
  right: 0;

  .search {
    width: 200px;
  }

  .el-icon-delete {
    position: absolute;
    color: white;
    font-size: 50px;
    right: 30px;
  }

  .el-icon-delete:hover {
    transform: scale(1.1);
  }
}

.albumbox {
  // 相册展示在界面上的样式
  .albumpic {
    overflow: hidden;
    margin-left: 60px;
    margin-top: 60px;
    float: left;
    width: 200px;
    height: 200px;
    background-color: pink;

    // 图片的样式
    img {
      //  transform: scale(1.1);
      //  background-color: blue;
      cursor: pointer;
      transition: all 0.4s;
      height: 160px;
      width: 100%;
    }

    img:hover {
      transform: scale(1.1);
    }
  }

  // 取消键的样式
  .quxiao {
    background-color: grey;
  }
  // top:0;
  // 这是创建相册的按钮的样式
  .createalbum {
    position: fixed;
    float: right;
    transition: all 0.5s;
    bottom: 50px;
    right: 50px;
    color: white;
    font-size: 80px;
  }

  .createalbum:hover {
    color: aqua;
    transform: rotate(360deg) scale(1.1);
  }
}
</style>
